<!--
 * @Author: your name
 * @Date: 2021-08-10 21:27:35
 * @LastEditTime: 2021-08-28 13:59:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \familyDoctor\doctor\src\views\login.vue
-->
<template>
  <div id="login">
    <el-container>
      <el-main style="padding-top: -20px">
        <el-row type="flex" align="middle" class="container">
          <el-col :span="6" class="container-boder">
            <el-row class="login-content">
              <el-col class="login-title">
                <i class="el-icon-s-check"></i>
                <div>订餐管理系统</div>
              </el-col>
            </el-row>
            <el-row class="login-content">
              <el-col :span="18" :offset="3">
                <el-input
                  v-model="username"
                  placeholder="用户名"
                  prefix-icon="el-icon-user"
                  class="input-height"
                ></el-input>
              </el-col>
            </el-row>
            <el-row class="login-content">
              <el-col :span="18" :offset="3">
                <el-input
                  v-model="password"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-lock"
                  show-password
                  class="input-height"
                  style="height: 5rem"
                ></el-input>
              </el-col>
            </el-row>
            <el-row class="login-content">
              <el-col :span="18" :offset="3">
                <el-button type="" class="w-100" @click="login">登录</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      asideArr: [], //存储侧边导航数据的数组
    };
  },
  methods: {
    async login() {
      if (!/^\w+$/.test(this.username)) {
        this.$message({
          message: "账户名或密码错误",
          type: "error",
          duration: "1000",
        });
        return;
      }
      if (!/^\w{6}$/.test(this.password)) {
        this.$message({
          message: "账户名或密码错误",
          type: "error",
          duration: "1000",
        });
        return;
      }
      const { data: res } = await this.axios({
        //发起ajax请求，进行登录验证
        method: "POST",
        url: "/login/user",
        data: {
          password: this.password,
          username: this.username,
        },
      });
      console.log(res);
      // console.log(res);
      if (res.code == 200) {
        console.log("登录请求成功", res);
        this.asideArr = res.data[0];
        let userName = res.data[1].admin.name; //获取用户名
        let uid = res.data[1].admin.id; //获取用户的uid
        let token = res.data[1].token; //获取token
        this.$message({
          message: "登录成功",
          type: "success",
          duration: "500",
        }); //登录成功提示
        sessionStorage.setItem("username", userName); //存取管理用户名到本地
        sessionStorage.setItem("uid", uid); //存储登录用户的uid到本地
        sessionStorage.setItem("token", token); //存储token到本地
        sessionStorage.setItem("aside", JSON.stringify(this.asideArr));
        this.$router.push("./main");
        //  this.$router.push("./main")
      } else {
        this.$message({
          message: "账户名或密码错误",
          type: "error",
          duration: "500",
        });
      }
    },
  },
};
</script>

<style lang='less' scoped>
.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  // background-color: #f5f9fc;
  background: #93defe url("../../public/img/login-img.png") no-repeat;
  background-position: 20% 50%;
  & .container-boder {
    // border: 1px solid #c1c5cc;
    background-color: #fff;
    padding-bottom: 40px;
    border-radius: 6px;
    margin-left: 90rem;
  }
  & .login-title {
    text-align: center;
    margin-top: 20px;
    font-size: 24px;
    color: #192e5b;
    font-weight: 500;
    & > i {
      font-size: 60px;
    }
  }
}
.login-content {
  margin-top: 2rem;
}
/deep/.el-input__inner {
  height: 5rem;
}
/deep/.el-button {
  height: 5rem;
}
.w-100 {
  width: 100%;
  background-color: #27a9e3;
  color: #fff;
  &:hover {
    background-color: #259dd4;
    color: #fff;
  }
}

</style>
